<template>
  <div class="user">
    <page-seach
      :conFig="formConfig"
      @resetBtnClick="headelResetClick"
      @queryClick="headelQueryClick"
    />
    <page-content
      ref="pageContentRef"
      :pageContentConfig="pageContentConfig"
      pageName="users"
      @visibleClick="isVisibleClick"
      @pageUpdateClick="updateClick"
    />
    <page-model
      ref="pageModelRef"
      :modelConfig="modelConfigComputed"
      :defaultInfo="defaultInfo"
      pageName="users"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from '../../../../store/store'
import { pageSeach } from '../../../../components/page-seach/index'
import { formConfig } from './search-config'
import { modelConfig } from './model-config'
import { pageContent } from '../../../../components/page-content/index'
import { pageContentConfig } from './page-content-config'
import { userPageSeach } from '../../../../hooks/user-page-seach'
import pageModel from '../../../../components/page-model/pageModel.vue'
import { usePageModel } from '../../../../hooks/page-model'
export default defineComponent({
  name: 'user',
  components: {
    pageSeach,
    pageContent,
    pageModel
  },

  setup() {
    const store = useStore()
    const newCallBack = () => {
      const passwordItem = modelConfig.formItem!.find(
        (item: any) => item.field === 'password'
      )
      passwordItem!.isshow = false
    }
    const editCallBack = () => {
      const passwordItem = modelConfig.formItem!.find(
        (item: any) => item.field === 'password'
      )
      passwordItem!.isshow = true
    }
    //动态添加部门，角色
    const modelConfigComputed = computed(() => {
      const deparmentList = modelConfig.formItem!.find(
        (item: any) => item.field === 'departmentId'
      )
      //console.log(deparmentList)
      deparmentList!.options = store.state.entireDparment.map((item) => {
        return { title: item.name, value: item.id }
      })
      const roleList = modelConfig.formItem!.find(
        (item: any) => item.field === 'roleId'
      )
      roleList!.options = store.state.entireRole.map((item) => {
        return { title: item.name, value: item.id }
      })

      return modelConfig
    })
    const [pageContentRef, headelResetClick, headelQueryClick] = userPageSeach()

    const [pageModelRef, isVisibleClick, updateClick, defaultInfo] =
      usePageModel(newCallBack, editCallBack)

    return {
      formConfig,
      pageContentConfig,
      pageContentRef,
      pageModelRef,
      headelResetClick,
      headelQueryClick,
      isVisibleClick,
      updateClick,
      modelConfig,
      modelConfigComputed,
      defaultInfo
    }
  }
})
</script>

<style scoped>
.user {
  width: 100%;
  border-top: 20px solid #f5f5f5;
}
</style>
